<!-- 引入公共部分 -->
{{extend './common/layout.html'}}
<!-- 引入css链接（填空） -->
{{block 'link'}}
<link rel="stylesheet" href="/static/home/css/shoppingCart.css">
{{/block}}
<!-- 引入主题部分 -->
{{block 'main'}}

<header>
    {{include './common/header.html'}}
    {{include './common/headerNav.html'}}
</header>

<div class="headInner">
    <div class="shoppingCartCtn">
        <!-- 订单列表模块 -->
        <div class="shoppingCartList">
            <div class="shoppingCartListOder">
                <div class="orderNav">
                    <ul>
                        <li class="productItem">商品</li>
                        <li class="priceItem">单价</li>
                        <li class="quantityItem">数量</li>
                        <li class="actionItem">操作</li>
                    </ul>
                </div>
                <div class="orderList">
                    <div class="orderListGroup">
                        <!-- <div class="orderListGroupFin"> -->
                            <div class="tableBoxInner">
                                <table class="ordersTable">
                                    <tbody>
                                        <!-- 每一行tr都是动态添加的 -->
                                        <tr class="goodsItem">
                                            <td class="productItem">
                                                <div class="product">
                                                    <div class="checkbox">
                                                        <input type="checkbox" class="checkBoxInput">
                                                        <label for=""></label>
                                                    </div>
                                                    <div class="productImg">
                                                        <img src="/static/home/image/clothes.jpg" alt="">
                                                        <!-- hover展示大图 -->
                                                        <div class="hoverImg">
                                                            <img src="/static/home/image/clothes.jpg" alt="">
                                                        </div>
                                                    </div>
                                                    <div class="productInfo">
                                                        <h3>
                                                            <a href="">2021年宽松卫衣女新款时尚字母早秋上衣韩版宽松圆领套头外套</a>
                                                        </h3>
                                                        <!-- 动态 -->
                                                        <p class="productSize">尺码: L</p>
                                                    </div>
                                                    <div style="clear: both;"></div>
                                                </div>
                                                
                                            </td>
                                            <td class="priceItem">
                                                <div class="myPrice">
                                                    <span class="yuan">￥</span>
                                                    <!-- 动态添加 -->
                                                    <strong class="price">99</strong>
                                                </div>
                                            </td>
                                            <td class="quantityItem">
                                                <!-- 数量组件 -->
                                                <div class="amount">
                                                    <!-- <a href="" class="amountDel"> -->
                                                        <button class="subtract subtractStyle">-</button>
                                                    <!-- </a> -->
                                                    <div class="amountNum">
                                                        <input type="text" value="1" class="amountInput" readonly>
                                                    </div>
                                                    <!-- <a href="" class="amountAdd"> -->
                                                        <button class="plus">+</button>
                                                    <!-- </a> -->
                                                </div>
                                            </td>
                                            <td class="actionItem">
                                                <div class="actionDel">
                                                    删除
                                                </div>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        <!-- </div> -->
                    </div>
                </div>
                <!-- 粘性定位结算 -->
                <div class="floatBar">
                    <div class="floatWrapper">
                        <div class="inputCheck">
                            <input type="checkBox" class="checkBoxAll">
                            全选
                        </div>
                        <div class="operations">
                            <a href="#" class="operationsBtn" onclick = 'Pop(2)'>删除</a>
                        </div>
                        <div class="floatRight">
                            <div class="showSelectedItems">
                                <span>已选商品</span>
                                <span class="activeNum">0</span>
                                <span>件</span>
                            </div>
                            <div class="priceSum">
                                ￥<span>0</span>
                            </div>
                        </div>
                        <div class="finalArea">
                            <a href="#">
                                结&nbsp;算
                            </a>
                        </div>
                        <div style="clear: both;"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 弹窗 -->
<div class="popBox">
    <div class="pop">
        <div class="popInner">
            <span class="deleteIcon"><i class="iconfont shibai" style="font-size: 20px;"></i></span>
            <div class="deleteGood">
                删除宝贝
            </div>
            <div class="deleteGoodsInner">
                删除的宝贝将可能会被别人抢走哦~确定要删除吗？
            </div>
            <div class="deleteBtn">
                <button class="noDelete">先留着</button>
                <button class="sureDelete">不要了</button>
            </div>
        </div>
    </div>
</div>
{{include './common/success.html'}}

<footer>
    {{include './common/footer.html'}}
</footer>

{{/block}}
        
{{block 'script'}}
<script src="/static/home/js/shoppingCart.js"></script>
{{/block}}